<template>
	<view class="bgc" :style="{background:'url('+Imgbase+'/new_goodmy_bgc.png)','background-size':'100%',}">
		<view class="padding-top-100 padding-left-20" style="height: 15vh;">
			<image class="w-80 h-80" :src="Imgbase+'/'+skin+'_goodpoor_img1.png'" mode="aspectFit" @click="back">
			</image>
		</view>

		<view class="list_box overhid ">
			<scroll-view scroll-y class="overhid sroY padding-top-40" scroll-with-animation @scrolltolower="onbottom()">

				<view class="text-center color3 Afont font-30" v-if="list.length == 0">
					暂无Good赏
				</view>

				<view class="w100 box margin-bottom-75 padding-20" v-for="(item,index) in list" :key="index"
					@click="godetail(item.id)">
					<view class="flex-between w100">
						<view class="Afont font-30">
							{{item.name}}
						</view>
						
						<view class="price Bfont margin-bottom-20">
							<view class="">
								￥
							</view>
							<view class="font-36 num ">
								{{item.cost}}
							</view>
						</view>
					</view>

					<view class="flex-between w100 shopbgc margin-bottom-0">
						<view class="">
							<view class="fl margin-right-10" v-for="(it,idx) in item.good_list" :key="idx">
								<view class="w-80 h-100">
									<image class="w100 h100 radius-10" :src="it.goods_adimage" mode="aspectFill">
									</image>
								</view>
							</view>
						</view>

						<view class=" Afont">
							<view class="color1 font-24">
								<text class="color2">剩 {{item.has_num}}</text>/<text>{{item.good_num}}</text>
							</view>

							<view class="font-22">
								<u-count-down v-if="item.res_time > 0" :time="item.res_time * 1000"
									format="HH:mm:ss"></u-count-down>

								<text v-else>已结束禁止购买</text>
							</view>
						</view>
					</view>

					<view class="color3 font-24 Afont">
						{{item.open_text}}开赏
					</view>

					<view class="posimg h-320 w100">
						<image class="w100 h100" :src="Imgbase + '/new_goodinf_img4.png'" mode="aspectFit">
						</image>
					</view>

				</view>
			</scroll-view>

		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				Imgbase: getApp().globalData.Imgbase,
				skin: 'classics',
				list: [],
				page: 1
			}
		},
		onLoad(i) {

		},
		onShow() {
			if (uni.getStorageSync('token') == '') {
				this.$uniApi.trylogin();
			}
			// if (uni.getStorageSync('skin')) {
			// 	this.skin = uni.getStorageSync('skin')
			// }
			this.page = 1
			this.list = []
			// this.getSkin()
			this.poorlist()
		},
		methods: {
			godetail(id) {
				uni.navigateTo({
					url: '/pagesA/GoodAward/detail?id=' + id
				})
			},
			onbottom() {
				this.page++
				this.poorlist()
			},
			// 奖池列表
			async poorlist() {
				let _this = this;
				let item = await this.$api.post('Seats/poorList', {
					page: _this.page,
					token: uni.getStorageSync('token'),
					limit: 20
				})
				for (let i = 0; i < item.data.list.length; i++) {
					_this.list = _this.list.concat(item.data.list[i])
				}
				console.log(_this.list)

			},
			// 查看当前皮肤
			async getSkin() {
				let item = await this.$api.post('user/Skins', {
					token: uni.getStorageSync('token'),
				})
				uni.setStorageSync('skin', item.data.skin);
				this.skin = item.data.skinn
			},
			back() {
				uni.navigateBack()
			}
		},

	}
</script>

<style lang="less" scoped>
	.box {
		position: relative;

		.price {
			color: #ff0000;
			display: flex;
			align-items: baseline;
			justify-content: flex-end
		}

		.shopbgc {
			background: linear-gradient(to right, #fff, #F6F6F8);
			padding: 15rpx 15rpx 15rpx 0;
		}

		.color1 {
			color: #949494;
		}

		.color2 {
			color: #595959;
		}

		.color3 {
			color: #5C5C5C;
		}

		.posimg {
			position: absolute;
			z-index: 99;
			left: 0rpx;
			top: -20rpx;
			// width: 102%;
		}
	}

	.sroY {
		// background-color: #fff;
		height: 85vh;
		// padding: 0 20rpx;
	}

	.list_box {
		border-top-right-radius: 40rpx;
		border-top-left-radius: 40rpx;
	}

	.bgc {
		background-color: #F7F2E8;
		min-height: 100vh;
	}
</style>